<template>
  <div class="container">
    <div class="app-container">
      <el-button type="primary" size="small" style="margin-bottom: 10px;" @click="openAddRoot">添加权限</el-button>
      <el-table
        row-key="id"
        :data="tableData"
        size="medium"
        default-expand-all
      >
        >
        <el-table-column width="300px" label="名称" prop="name" />
        <el-table-column width="300px" label="标识" prop="code" />
        <el-table-column width="300px" label="描述" prop="description" />
        <el-table-column width="150px" label="操作" header-align="center" align="right">
          <template v-slot="{row}">
            <el-button v-if="row.type === 1" type="text" size="mini" @click="openAddChild(row)">添加</el-button>
            <el-button type="text" size="mini" style="padding-right: 10px" @click="openEdit(row)">编辑</el-button>
            <template>
              <el-popconfirm title="确定删除吗？" @onConfirm="deletePerm(row.id)">
                <el-button slot="reference" type="text" size="mini">删除</el-button>
              </el-popconfirm>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加权限对话框 -->
      <el-dialog :title="title" :visible.sync="showPermVisible" width="500px" @close="cancelAdd">
        <el-form
          ref="addPermForm"
          :model="permFormData"
          :rules="rules"
          size="small"
          label-position="right"
          label-width="80px"
        >
          <el-form-item label="名称" prop="name">
            <el-input v-model="permFormData.name" />
          </el-form-item>
          <el-form-item label="标识" prop="code">
            <el-input v-model="permFormData.code" />
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input v-model="permFormData.description" />
          </el-form-item>
        </el-form>
        <el-row slot="footer" type="flex" justify="center">
          <el-button size="small" type="primary" @click="addPerm">确定</el-button>
          <el-button size="small" @click="cancelAdd">取消</el-button>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getPermList, addPerm, getPerm, modifyPerm, deletePerm } from '@/api/permission'
import { transList2Tree } from '@/utils/date-handle'

export default {
  name: 'Permission',
  data() {
    return {
      title: '',
      tableData: [],
      showPermVisible: false,
      permFormData: {
        name: '',
        code: '',
        description: '',
        type: '',
        pid: '',
        enVisible: 0
      },
      rules: {
        name: [{ required: true, message: '请输入权限名', trigger: 'blur' }],
        code: [{ required: true, message: '请输入权限代码', trigger: 'blur' }],
        description: [{ required: true, message: '请输入权限描述', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getPermList()
  },
  methods: {
    // 获取权限列表，改为树形结构
    async getPermList() {
      const res = await getPermList()
      this.tableData = transList2Tree(res)
    },

    // 添加权限按钮
    openAddRoot() {
      this.title = '添加权限'
      this.showPermVisible = true
      this.permFormData.type = 1
      this.permFormData.pid = 0
    },
    // 添加/编辑权限
    addPerm() {
      this.$refs.addPermForm.validate(async(isOk) => {
        if (isOk) {
          // 编辑权限
          if (this.permFormData.id) {
            await modifyPerm(this.permFormData)
            this.$message.success('修改成功')
          } else {
            await addPerm(this.permFormData)
            this.$message.success('添加成功')
          }
          this.cancelAdd()
          this.getPermList()
        }
      })
    },
    // 取消添加按钮
    cancelAdd() {
      this.showPermVisible = false
      this.$refs.addPermForm.resetFields()
    },

    // 添加子权限按钮
    openAddChild(row) {
      this.showPermVisible = true
      this.permFormData.type = 2
      this.permFormData.pid = row.id
    },

    // 编辑按钮
    async openEdit(row) {
      this.title = '编辑权限'
      this.showPermVisible = true
      // 回显数据
      this.permFormData = await getPerm(row.id)
    },

    // 删除权限
    async deletePerm(id) {
      await deletePerm(id)
      this.$message.success('删除成功')
      this.getPermList()
    }
  }
}
</script>

<style scoped>
.app-container{
  padding-left: 20px;
}
</style>
